<template>
  <el-row style="height: 80vh">
    <el-col :span="24" style="overflow: auto; max-height: 80vh">
      <JCdataItem
        style="margin-bottom: 10px"
        v-for="(item, index) in testItems"
        :key="index"
        :indexText="getIndexText(item.componentid)"
        :nuclearPowerVoltage="item.nuclearPowerVoltage"
        :nuclearPowerCurrent="item.nuclearPowerCurrent"
        :nuclearPowerLatchCount="item.nuclearPowerLatchCount"
        :bankVoltage="item.bankVoltage"
        :bankCurrent="item.bankCurrent"
        :bankLatchCount="item.bankLatchCount"
        :auxiliaryPowerVoltage="item.auxiliaryPowerVoltage"
        :auxiliaryPowerCurrent="item.auxiliaryPowerCurrent"
        :auxiliaryPowerLatchCount="item.auxiliaryPowerLatchCount"
        :flipCount="item.flipnums"
        :status="item.abnormalstatus"
        :testid="props.testid"
        :boardid="props.boardid"
        :componentid="item.componentid"
        :enableboardstatus="props.enableboardstatus"
        :datasourceindex="props.datasourceindex"
        :boardType="props.boardType"
        :testInfo="props.testInfo"
        :type="props.type"
        :deviceid="props.deviceid"
      />
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";

import JCdataItem from "./jcdataitem.vue";
import TestLog from "../testcenter/testlog.vue";
import { geticdynamicDataLimit48 } from "@/api/device/iccomponentBoardStatus";
// 初始化包含 60 个数据的响应式数组
const testItems = ref([]);
const props = defineProps({
  boardid: {
    type: String,
    default: "1",
  },
  testid: {
    type: String,
    default: "",
  },
  enableboardstatus: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "ic",
  },
  deviceid: {
    type: String,
    default: "",
  },
  boardType: {
    type: String,
    default: "",
  },
  datasourceindex: {
    type: String,
    default: "",
  },
  testInfo: {
    type: Object,
    default: () => {},
  },
});

const getIndexText = (componentid) => {
  // 计算所在组号和组内序号 //8 一组
  const group = Math.floor((componentid - 1) / 8) + 1;
  const indexInGroup = ((componentid - 1) % 8) + 1;
  return `${props.boardid}-${group}-${indexInGroup}`;
};
// 封装获取数据的函数
const fetchData = () => {
  if (props.boardid && props.testid) {
    geticdynamicDataLimit48({
      boardid: props.boardid,
      testid: props.testid,
      datasourceindex: props.datasourceindex,
    }).then((res) => {
      // 修改板卡序号从小到大排序
      testItems.value = res.sort((a, b) => a.componentid - b.componentid);
    });
  }
};
const fetchInterval = ref(null);

// 设置定时任务
const setFetchInterval = () => {
  // 5 秒执行一次，单位为毫秒
  fetchInterval.value = setInterval(fetchData, 5000);
};

// 清除定时任务
const clearFetchInterval = () => {
  if (fetchInterval.value) {
    clearInterval(fetchInterval.value);
  }
};

// 组件挂载时调用获取数据函数
onMounted(() => {
  fetchData();

  clearFetchInterval();
  setFetchInterval();
});
onUnmounted(() => {
  clearFetchInterval();
});
// 监听 props.boardid 和 props.testid 的变化
// watch(
//   [() => props.boardid, () => props.testid],
//   ([newBoardId, newTestId]) => {
//     fetchData();
//   },
//   { deep: true }
// );

// // 生成 60 个数据
// for (let i = 0; i < 60; i++) {
//   testItems.value.push({
//     indexText: `Index ${i + 1}`,
//     currentLabel: `当前电流 ${i + 1}`,
//     // 生成 0 - 5 之间带一位小数的随机电流值
//     currentValue: `${(Math.random() * 5).toFixed(1)}A`,
//     // 随机生成状态值
//     status: ["正常", "烧毁", "退化", "断电"][Math.floor(Math.random() * 4)],
//   });
// }
</script>
